<!-- Layout 母模板 -->
<% extend('../../template/layout.art') %>

    <!-- body -->
    <% block('content', function(){ %>

        <div class="je-p20">
            <div class="card-main">
                <div class="left-box je-w33">
                    <div class="card-list">
                        <h3>选择年卡</h3>
                        <table class="je-table" skin="botline">
                            <thead>
                                <tr>
                                    <th>卡类型</th>
                                    <th>年卡类型</th>
                                    <th>费用</th>
                                    <th>选择</th>
                                </tr>
                            </thead>
                            <tbody class="card_list">

                            </tbody>
                        </table>
                    </div>
                    <div class="card-info">
                        <h3>卡类型基本信息</h3>
                        <ul>
                            <li>卡介质:</li>
                            <li>有效天数:</li>
                            <li>有效期:</li>
                            <li>费用:</li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="right-box je-w67">
                    <div class="userinfo">
                        <h3>账户信息</h3>
                        <table class="je-table" skin="noline" even>
                            <tr>
                                <td rowspan="3"><img width="120" height="120"></td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">持卡人</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="cardOwner" autocomplete="off" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">卡面编号</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="cardFaceId" autocomplete="off" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">生效日期</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="endDate" placeholder="" readonly class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">出生日期</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="birthday" placeholder="" readonly class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">证件类型</label>
                                        <div class="je-inputbox">
                                            <select class="myselect">
                                                <option value="身份证">身份证</option>
                                                <option value="学生证">学生证</option>
                                                <option value="工作证">工作证</option>
                                                <option value="士兵证">士兵证</option>
                                                <option value="军官证">军官证</option>
                                                <option value="护照">护照</option>
                                                <option value="户口本">户口本</option>
                                            </select>
                                        </div>
                                    </div>

                                </td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">证件号码</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="idNumber" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">性别</label>
                                        <input type="radio" name="radio" jename="radio" checked jetext="男">
                                        <input type="radio" name="radio" jename="radio" jetext="女">
                                    </div>

                                </td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">手机号码</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="contact" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">所属单位</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="employer" autocomplete="off" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                                <td>
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">职位</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="position" autocomplete="off" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan="2">
                                    <div class="je-form-item">
                                        <label class="je-label je-f14">住址</label>
                                        <div class="je-inputbox">
                                            <input type="text" name="title" id="address" placeholder="" class="je-input je-pl5 je-pr5">
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>

                    </div>
                    <div class="button-box">
                        <table class="je-table" skin="noline">
                            <tr>
                                <td><button class="je-btn je-btn-big je-f18 je-bg-orange pay-card">开卡结算</button></td>
                                <td>
                                    <textarea placeholder="请输入内容" class="je-textarea"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script type="html" id="card_list">
            <tr>
                <td class="id" style="display:none">{id}</td>
                <td class="code">{code}</td>
                <td class="name">{name}</td>
                <td class="price">{price}</td>
                <td><button class="je-btn je-btn-small je-btn-normal push-select">选择</button></td>
            </tr>

        </script>
        <script type="text/javascript">
            jeui.use(["jquery", "jeBox", "jeLayout", "jeTabPane", "jeAccordion", "jeCheck", "jeDate", "jeNavTab", "jeProgress", "jeSelect", "jeDropdown", "jeTable"], function() {
                $("#endDate").jeDate({
                    format: "YYYY-MM-DD"
                });
                $("#birthday").jeDate({
                    format: "YYYY-MM-DD"
                })
                $(".userinfo").jeCheck({
                    jename: "radio"
                });
                $(".myselect").jeSelect({
                    sosList: false
                });
            })
        </script>

        <% }) %>